<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core">
<ui:composition template="/WEB-INF/templates/common/public.xhtml">
    <ui:define name="title">Track Cargo</ui:define>
    <ui:define name="content">

        <div class="ui-grid-col-2" id="leftCol"></div>
        <div class="ui-grid-col-8" id="mainCol">

            <br/>
            <div class="ui-g ui-g-12">
                <div class="ui-g-6 ui-g-offset-3">
                    <h:form id="trackingForm">
                        <h:panelGrid columns="3" cellpadding="15">
                            <p>Enter your tracking ID:</p>
                            <p:inputText id="trackingIdInput"
                                         value="#{public.track.trackingId}" required="true"
                                         placeholder="XYZ789" title="Valid tracking ID"/>
                            <h:commandButton value="Track!"
                                             action="#{public.track.onTrackById()}"/>
                        </h:panelGrid>
                    </h:form>
                </div>
            </div>

            <div class="ui-g-12">
                <p:separator/>
            </div>

            <div class="ui-g-12">
                <h:panelGroup rendered="#{not empty public.track.cargo}">
                    <div id="result">
                        <p>
                            Cargo <strong>#{public.track.cargo.trackingId}</strong> is
                            currently <strong>#{public.track.cargo.statusText}</strong>
                        </p>

                        <p>
                            Estimated time of arrival in <strong>#{public.track.cargo.destinationName}</strong>:
                            #{public.track.cargo.eta}
                        </p>
                        <ui:fragment
                                rendered="#{not empty public.track.cargo.nextExpectedActivity}">
                            <p>#{public.track.cargo.nextExpectedActivity}</p>
                        </ui:fragment>

                        <h:panelGroup rendered="#{public.track.cargo.misdirected}">
                            <p>
                                <i class="fa fa-exclamation-triangle" style="color: #9b2332"></i>
                                Cargo is misdirected.
                            </p>
                        </h:panelGroup>
                    </div>
                </h:panelGroup>
            </div>

            <div class="ui-g ui-g-12">
                <div class="ui-g-3">
                    <p:outputLabel value="Handling History"
                                   style="font-size: 2em; font-weight: bold"/>
                </div>

                <div class="ui-g-12">
                    <p:separator/>
                    <br/> <br/>
                </div>

                <h:outputLabel
                        value="There are no events recorded for the tracking ID #{public.track.cargo.trackingId}."
                        rendered="#{empty public.track.cargo.events}"/>

                <div class="ui-g-12">
                    <ui:repeat value="#{public.track.cargo.events}" var="leg">
                        <div>
                            <ui:fragment rendered="#{leg.expected}">
                                &#160;&#160;<i class="fa fa-check"
                                               style="color: green"/>&#160;#{leg.description}, at #{leg.time}
                            </ui:fragment>
                            <ui:fragment rendered="#{!leg.expected}">
                                &#160;&#160;<em class="fa fa-flag"
                                                style="color: #9b2332"/>&#160;#{leg.description}, at #{leg.time}
                            </ui:fragment>
                        </div>
                    </ui:repeat>
                </div>
            </div>

            <h:panelGroup rendered="#{not empty public.track.cargo}">
                <div id="map" class="ui-g-12">
                    <iframe class="mapFrame" width="100%" height="960" frameBorder="0"
                            src="#{request.contextPath}/public/mapFrame.xhtml?statusCode=#{public.track.cargo.statusCode}&amp;lastKnownLocationCode=#{public.track.cargo.lastKnownLocationCode}&amp;lastKnownLocationName=#{public.track.cargo.lastKnownLocationName}&amp;originCode=#{public.track.cargo.originCode}&amp;originName=#{public.track.cargo.originName}&amp;destinationCode=#{public.track.cargo.destinationCode}&amp;destinationName=#{public.track.cargo.destinationName}"/>
                </div>
            </h:panelGroup>
        </div>
    </ui:define>
</ui:composition>
</html>
